<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>你的课表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/mui/css/mui.min.css">

    <script src="__PUBLIC__/static/jquery-2.0.3.min.js"></script>

</head>

<body>

<style>
    .mui-control-content {
        background-color: white;
        /*min-height: 450px;*/
    }

    .mui-control-content .mui-loading {
        margin-top: 50px;
    }
</style>
<!--<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">课表</h1>
</header>-->
<div class="mui-content">

    <form class="mui-input-group">
        <div class="mui-input-row">
            <label>学年</label>
            <!--<input type="text" placeholder="普通输入框">-->
            <select id="xn" name="xn" style="color: #007AFF">
                    <option value="{$bxq}" selected>{$bxq}</option>
                <volist name="xn" id="vo">
                    <neq name="vo.XNXQH" value="$bxq">
                        <option value="{$vo.XNXQH}">{$vo.XNXQH}</option>
                    </neq>
                </volist>
            </select>
        </div>
        <div class="mui-input-row">
            <label>周次</label>

            <select id="zc" name="zc" style="color: #007AFF">
                <option value="0">全部</option>
                <for start="$zc.start" end="$zc.end">
                    <option value="{$i}">{$i}</option>
                </for>
            </select>


        </div>

    </form>

    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl"
             class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="color: white;">
            <a class="mui-control-item mui-btn-primary mui-active" href="#item1mobile">
                周一
            </a>
            <a class="mui-control-item mui-btn-primary" href="#item2mobile">
                周二
            </a>
            <a class="mui-control-item mui-btn-primary" href="#item3mobile">
                周三
            </a>
            <a class="mui-control-item mui-btn-primary" href="#item4mobile">
                周四
            </a>
            <a class="mui-control-item mui-btn-primary" href="#item5mobile">
                周五
            </a>
            <a class="mui-control-item mui-btn-primary" href="#item6mobile">
                周六
            </a>
            <a class="mui-control-item mui-btn-primary" href="#item7mobile">
                周日
            </a>
        </div>
        <!--<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-sm-1"></div>-->
        <div class="mui-slider-group" id="kbxx">

            <for start="1" end="8" name="f">
                <if condition="$vo['xqc'] eq 1 ">
                    <div id="item{$f}mobile" class="mui-slider-item mui-control-content mui-active">
                        <else/>
                        <div id="item{$f}mobile" class="mui-slider-item mui-control-content">
                </if>
                <ul class="mui-table-view">
                    <volist name="kb" id="vo">
                        <if condition="$vo['xqc'] eq $f ">
                            <li class="mui-table-view-cell">
                                <div class="mui-table">
                                    <div class="mui-table-cell mui-col-xs-3"
                                         style="display:table-cell; vertical-align:middle;">
                                        <p>{$vo.jc}</p>
                                    </div>
                                    <div class="mui-table-cell mui-col-xs-9">
                                        <div class="content">
                                            {$vo.kcxx}

                                        </div>
                                    </div>
                                </div>
                            </li>
                        </if>
                    </volist>
                </ul>

        </div>
        </for>

    </div>
</div>

</div>
<footer>
    <div align="center">
        <p style="display:table-cell; vertical-align:middle;">
            <small>&copy;2016 技术支持 敏捷软件协会</small>
        </p>
    </div>
</footer>
<script src="__PUBLIC__/mui/js/mui.min.js"></script>

<script>
    mui.init({
        swipeBack: false
    });
    (function ($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: true //是否显示滚动条
        });
    })(mui);


</script>

<!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script type="text/javascript">

    $("#xn").bind({
        change: function () {
            var xn = $('#xn').val();
            var zc = $('#zc').val();
            var url = "{:addons_url('Cxkb://Cxkb/updateKb')}";

            $("#kbxx").empty();
            $loadhtml="";
            for (var i = 1; i <= 7; i++) {
                $loadhtml += '<div id="item' + i + 'mobile" class="mui-slider-item">';
                $loadhtml += '<div class="mui-loading"><div class="mui-spinner">';
                $loadhtml += '</div></div>';
                $loadhtml += '</div>';
            }
            $("#kbxx").html($loadhtml);
            $.post(url, {xn: xn, zc: zc,}, function (data) {   // $('#abc').seralize(),
                $html = '';
                for (var i = 1; i <= 7; i++) {
                    $html += '<div id="item' + i + 'mobile" class="mui-slider-item mui-control-content">';
                    $html += '<ul class="mui-table-view">';
                    $.each(data.rows, function (index, item) {
                        if (data.rows[index].xqc == i) {
                            $html += '<li class="mui-table-view-cell">';
                            $html += '<div class="mui-table">';
                            $html += '<div class="mui-table-cell mui-col-xs-3" style="display:table-cell; vertical-align:middle;">';
                            $html += '<p>' + data.rows[index].jc + '</p>';
                            $html += '</div>';
                            $html += '<div class="mui-table-cell mui-col-xs-9">';
                            var kcxx = data.rows[index].kcxx==null?"":data.rows[index].kcxx;
                            $html += '<div class="content">' + kcxx + '</div>';
                            $html += '</div>';
                            $html += '</div>';
                            $html += '</li>';
                        }
                    })
                    $html += '</ul>';
                    $html += '</div>';
                }
                $("#kbxx").empty();
                $("#kbxx").append($html);

            }, 'json');
        }
    });

    $("#zc").bind({
        change: function () {
            var xn = $('#xn').val();
            var zc = $('#zc').val();
            var url = "{:addons_url('Cxkb://Cxkb/updateKb')}";

            $("#kbxx").empty();
            $loadhtml="";
            for (var i = 1; i <= 7; i++) {
                $loadhtml += '<div id="item' + i + 'mobile" class="mui-slider-item">';
                $loadhtml += '<div class="mui-loading"><div class="mui-spinner">';
                $loadhtml += '</div></div>';
                $loadhtml += '</div>';
            }
            $("#kbxx").html($loadhtml);
            $.post(url, {xn: xn, zc: zc,}, function (data) {   // $('#abc').seralize(),
                $html = '';
                for (var i = 1; i <= 7; i++) {
                    $html += '<div id="item' + i + 'mobile" class="mui-slider-item mui-control-content">';
                    $html += '<ul class="mui-table-view">';
                    $.each(data.rows, function (index, item) {
                        if (data.rows[index].xqc == i) {
                            $html += '<li class="mui-table-view-cell">';
                            $html += '<div class="mui-table">';
                            $html += '<div class="mui-table-cell mui-col-xs-3" style="display:table-cell; vertical-align:middle;">';
                            $html += '<p>' + data.rows[index].jc + '</p>';
                            $html += '</div>';
                            $html += '<div class="mui-table-cell mui-col-xs-9">';
                            var kcxx = data.rows[index].kcxx==null?"":data.rows[index].kcxx;
                            $html += '<div class="content">' + kcxx + '</div>';
                            $html += '</div>';
                            $html += '</div>';
                            $html += '</li>';
                        }
                    })
                    $html += '</ul>';
                    $html += '</div>';
                }
                $("#kbxx").empty();
                $("#kbxx").append($html);

            }, 'json');
        }
    });


</script>
</body>

</html>